<template>
  <el-aside v-if="!isLoginRoute" :width="isCollapsed? '64px' : '200px'" class="side-nav">
      <div class="collapse-button" @click="isCollapsed =!isCollapsed">
          <!-- 根据折叠状态显示不同图标 -->
          <template v-if="!isCollapsed">
              <el-icon size="18px" color="#666">
                  <ArrowRight />
              </el-icon>
          </template>
          <template v-else>
              <el-icon size="18px" color="#666">
                  <ArrowLeft />
              </el-icon>
          </template>
      </div>
      <el-menu
              :default-active="activeIndex"
              class="el-menu-vertical-demo"
              @select="handleSelect"
              :collapse="isCollapsed"
              :collapse-transition="false"
      >
          <el-menu-item
                  v-for="(route, index) in menuRoutes"
                  :key="index"
                  :index="route.path"
                  v-if="route.meta && route.meta.requiresAuth && route.path!== '/' && route.path!== '/login'"
          >
              <template #default>
                  <el-icon size="18px">
                      <!-- 添加对 route.meta 的检查 -->
                      <component :is="route.meta && getIconComponent(route.meta.icon as string)" />
                  </el-icon>
                  <!-- 添加对 route.meta 的检查 -->
                  <span v-show="!isCollapsed">{{ route.meta && route.meta.title }}</span>
              </template>
          </el-menu-item>
      </el-menu>
  </el-aside>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useIconStore } from '@/stores/iconStore';
import { ArrowRight, ArrowLeft } from '@element-plus/icons-vue';
import { useRouterStore } from '@/stores/routerStore';

const route = useRoute();
const router = useRouter();
const activeIndex = ref('');
const isCollapsed = ref(false);
const isLoginRoute = computed(() => route.fullPath === '/login');
const routerStore = useRouterStore();

// 封装获取菜单数据的函数
const getMenuRoutes = () => {
  return router.getRoutes().filter(route => {
    return route.meta && route.meta.requiresAuth;
  });
};

const menuRoutes = computed(() => getMenuRoutes());

// 根据当前路由设置 activeIndex
const setActiveIndex = () => {
  const currentPath = route.path;
  const foundRoute = menuRoutes.value.find(route => {
    return route.path === currentPath && route.meta;
  });
  activeIndex.value = foundRoute? foundRoute.path : '';
};

// 监听路由变化，更新 activeIndex
watch(() => route.path, () => {
  setActiveIndex();
});

// 监听动态路由添加状态，重新获取菜单数据
watch(() => routerStore.hasFetchedRoutes, () => {
  setActiveIndex();
});

const handleSelect = (key: string) => {
  router.push(key);
  activeIndex.value = key;
};

const iconStore = useIconStore();
const getIconComponent = iconStore.getIconComponent;

// 初始化时设置 activeIndex
setActiveIndex();
</script>

<style scoped>
.side-nav {
  background-color: #f5f7fa;
  height: 100vh;
  transition: width 0.3s ease;
  margin: 0;
  padding: 0;
  overflow-y: auto;
}

.side-nav::-webkit-scrollbar {
  display: none;
}

.collapse-button {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.el-menu-vertical-demo {
  height: 100%;
}
</style>